<template>
  <el-tabs :id="'tabpane' + widget.i" v-model="widget.config.selected">
    <el-tab-pane
      v-for="(tab, index) in widget.config.tabs"
      :key="index"
      :label="tab.label"
      :name="tab.name"
    >
      <el-scrollbar :height="height">
        <div
          :id="'subContent' + widget.i + index"
          :style="{ height: height + 'px' }"
          @dragenter="dragEnter"
          @dragleave="dragleave"
          @drop="drop"
        >
          <grid-layout
            style="height: 100%"
            ref="gridlayoutRef"
            v-model:layout="tab.children"
            :col-num="12"
            :row-height="30"
            :is-draggable="draggable"
            :is-resizable="draggable"
            :vertical-compact="true"
          >
            <grid-item
              ref="gridItemRefs"
              :key="item.i"
              v-for="item in tab.children"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="item.i"
              @click.stop="getSetting(item)"
            >
              <span v-if="draggable" class="close"
                ><el-icon @click.stop="delItem(item)"><Close /></el-icon
              ></span>
              <component
                ref="fieldRef"
                :is="getFieldWidget(item)"
                :widget="item.config"
                :fileName="fileName"
              ></component>
            </grid-item>
          </grid-layout>
        </div>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
//局部批量注册组件
const requireAll = require.context("./", true, /\.vue$/);
const componentsObj = {};
let arr = [];
const modulList = requireAll.keys().map((item) => requireAll(item));
modulList.forEach(({ default: modulObj }) => {
  if (modulObj) {
    componentsObj[modulObj.__name] = modulObj;
    arr.push(modulObj.__name);
  }
});
export default {
  components: componentsObj, //注册所有相关组件
  data() {
    return {
      comList: arr,
    };
  },
};
</script>
<script setup>
import { ref, onMounted, onUnmounted, watch, defineModel, computed } from "vue";
import { Close, Plus, Grid } from "@element-plus/icons-vue";
import tool from "@/utils/tool";
const props = defineProps({
  draggable: { type:Boolean, default:true},
});
const emit = defineEmits(["dragSubForm", "dragLeaveSubForm"]);
const setting = defineModel("setting");
const widget = defineModel("widget");
let last = null;
const gridItemRefs = ref([]);
const gridlayoutRef = ref([]);
const fieldRef = ref([])
const height = computed(() => {
  return 32 * widget.value.h;
});
const layoutIndex = computed(() => {
  let index = widget.value.config.tabs.findIndex(
    (ele) => widget.value.config.selected === ele.name
  );
  return index;
});
const subId = computed(() => {
  return "subContent" + widget.value.i + layoutIndex.value;
});
onMounted(() => {});
const getFieldWidget = (item) => {
  return item.type + "-widget";
};
const getSetting = (val) => {
  setting.value = val;
};
const delItem = (val) => {
  let delIndex = widget.value.config.tabs[layoutIndex.value].children.findIndex(
    (el) => el.i === val.i
  );
  widget.value.config.tabs[layoutIndex.value].children.splice(delIndex, 1);
};
const dragEnter = (e) => {
  last = e.target;
  let parentRect = document.getElementById(subId.value).getBoundingClientRect();
  document.getElementById(subId.value).classList.add("stopDrag");
  emit("dragSubForm", {
    position: parentRect,
    subId: widget.value.i,
    gridItem: gridItemRefs.value,
    gridlayout: gridlayoutRef.value[layoutIndex.value],
  });
};
const dragleave = (e) => {
  if (e.target === last) {
    let tab = widget.value.config.tabs[layoutIndex.value].children;
    let index1 = tab.findIndex((obj) => obj.i === "drop");
    if (index1 !== -1) {
      gridlayoutRef.value[layoutIndex.value].emitter.all.get("dragEvent")[0]([
        "dragend",
        "drop",
        1,
        1,
        1,
        1,
      ]);
      tab = tab.filter((obj) => obj.i !== "drop");
      console.log(tab);
    }
    document.getElementById(subId.value).classList.remove("stopDrag");
    emit("dragLeaveSubForm", e.relatedTarget);
  }
};
const drop = (e) => {
  document.getElementById(subId.value).classList.remove("stopDrag");
  emit("dragLeaveSubForm");
};
const getAllData = (val) => {
  fieldRef.value.forEach((ele) => {
    if (ele.changeOption) {
      ele.changeOption(val);
    }
    if (ele.getTableData) {
      ele.getTableData(val);
    }
  });
};
defineExpose({
  getAllData
})
</script>
<style scoped>
.stopDrag * {
  pointer-events: none;
}
.close {
  height: 16px;
  width: 16px;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  color: #000000;
  z-index: 9;
}
</style>